<template>
    <el-radio-group v-model="activeLabel" style="margin-bottom: 20px">
        <el-radio-button :label="item.id" v-for="item in components" :key="item.id">{{ item.label }}</el-radio-button>
    </el-radio-group>
    <component :is="currentCom" :seas_id="props.seaId" :seaName="props.seaName"></component>
</template>
<script setup lang="tsx">
import OneTable from './OneTable.vue';
import TwoTable from './TwoTable.vue';
import ThreeTable from './ThreeTable.vue';
import FourTable from './FourTable.vue';
import { ref, reactive, computed, watch, withDefaults, markRaw } from 'vue';

interface PropsType {
    seaId?: string | number;
    seaName: string;
}
const props = withDefaults(defineProps<PropsType>(), {
    seaId: '',
    seaName: ''
});
const activeLabel = ref<number>(0);

type ComponentType = {
    id: number;
    label: string;
    comName: any;
};

type Com = Pick<ComponentType, 'comName'>;

const components = reactive<ComponentType[]>([
    {
        id: 0,
        label: '待分配',
        comName: markRaw(OneTable)
    },
    {
        id: 1,
        label: '已分配',
        comName: markRaw(TwoTable)
    },
    {
        id: 2,
        label: '已放弃',
        comName: markRaw(ThreeTable)
    },
    {
        id: 3,
        label: '已退回',
        comName: markRaw(FourTable)
    }
]);

const currentCom = computed<Com>(() => {
    return components[activeLabel.value].comName;
});
</script>
